
<template>
  <el-form-item
    :label="label"
    :rules="rules"
    class="form-item__static"
  >
    <slot />
    <slot name="append">
      <span
        v-if="append"
        class="form-input__append"
      >{{ append }}</span>
    </slot>
    <slot name="hint">
      <div
        v-if="hint"
        class="form-item__tips"
      >
        {{ hint }}
      </div>
    </slot>
  </el-form-item>
</template>

<script>
export default {
  name: 'FormItemStatic',
  props: {
    hint: {
      type: String,
      default: ''
    },
    rules: {
      type: [Object, Array],
      default: null
    },
    label: {
      type: String,
      default: ''
    },
    append: {
      type: String,
      default: ''
    },
    prop: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.form-input {
  &__append:not(:empty) {
    margin-left: 10px;
  }
}
</style>
